<template>
	<div class="evaluate-operation self-operation">
		<div class="classIndex_h">
		    <a @click="goBack">综合素质评价</a>
		    <strong><i>></i>评价</strong>
		</div>

		<div class="quality-route">
			<!-- 班主任 -->
			<template v-if="$store.getters.userInfo.is_headmaster === 1">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/details', query: {id: path}}">班级详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
			
			<!-- 学生 -->
			<template v-else-if="roleBaseid(4)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">我的画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/self', query: {id: path}}">自我评价</router-link>
				<!-- <router-link  class="fade-router" :to="{path: '/class/quality/classmate', query: {id: path}}">评价同学</router-link> -->
				<router-link  class="fade-router" :to="{path: '/class/quality/classmate', query: {id: path}}" v-if="evaluateName.includes($g.user_id+'')">评价同学</router-link>
			</template>
			<!-- 家长 -->
			<template v-else-if="roleBaseid(5)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">孩子画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
			</template>
			<!-- 任课老师 -->
			<template v-else-if="roleBaseid(6)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
		</div>

		<div class="quality-seleter">
			<span>学期：</span>
			<el-select v-model="semester" clearable  placeholder="请选择" @change="changeQuality">
			   <el-option  
			     v-for="(item, index) in SemesterList"
			     :key="index"
			     :label="item.name"
			     :value="item.id">
			   </el-option>
			 </el-select>
		</div>

		<div class="evaluate-table" v-loading="loading"
		element-loading-text="拼命加载中" v-if="evaluateList.length != 0">
			<table>
				<thead>
				   <tr>
				     <th>一级指标</th>
				     <th>二级指标</th>
				     <th>指标定义</th>
				      <th>指标综合分</th>
				   </tr>
				 </thead>
				 <tbody>
				 	<template  v-for="(item, index) of evaluateList"> 

				 		<template>
				 			<tr v-for="(child, key) of item.children">
				 			 	<td  width="100px" align="center" v-if="key == 0" :rowspan="item.children.length"><div class="ev-cell">{{item.title}}</div></td>
				 			 	<td  width="100px"  align="center"><div class="ev-cell">{{child.title}}</div></td>
				 			  	<td><div class="ev-cell">{{child.content}}</div></td>
				 			  	<td  width="60px"  align="center"><div class="ev-cell">
				 			  		<span v-if="child.get_score">{{child.get_score}}</span>
				 			  		<span v-else>--</span>

				 			  		<el-input @change="setnumber($event, child,child.score)" v-else type="number" :min="0" :max="child.score" v-model="child.number" placeholder="请输入内容"></el-input>
				 			  	</div></td>
				 			</tr>
				 		</template>
				 		
				 	</template>
				 	<tr v-if="commentList.length != 0">
				 		<td align="center" colspan="3">合计综合分</td>
				 		<td align="center">{{totlaSum}}</td>
				 	</tr>
				 	
				 </tbody>
			</table>
		</div>

		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>

		<div class="evaluate-comment" v-if="commentList.length == 0">
			<h3>评语</h3>
			<div class="evaluate-txt">
				<el-input
				  type="textarea"
				  :rows="6" resize="none"
				  placeholder="请输入评语"
				  v-model="comment"
				  maxlength="300"
  					show-word-limit>
				</el-input>
				<!-- <span><i>0</i>/300</span> -->
			</div>
			<div  class="evaluate-btn">
				<el-button type="primary" @click="scoreQuality()" v-preventReClick>提交评分</el-button>
			</div>
		</div>

		<div class="self-evaluate self-evaluate-margin" v-else>
			<div class="quality-title"><i class="iq q-11"></i><span>自我评价</span></div>
			<div class="self-user" v-for="(item, index) of commentList" :key="index">
				<div >
					<span>
						<img :src="BASE_URL + item.avatar_path">
					</span>
					<p>{{item.name}}</p>
				</div>
				<p v-html="item.comment"> </p>
			</div>
		</div>

	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				evaluateName: sessionStorage.getItem('evaluate') ? sessionStorage.getItem('evaluate') : [],
				loading: true,
				comment: "",
				path: this.$route.query.id,
				evaluateList: [],
				semester: '',
				SemesterList: [],
				commentList: [],
				placeholder: false,
				totlaSum: 0
			}
		},
		watch: {
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.getSemester()
					// this.evaluatingIndicator()
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 对输入框限制内容
			 * @qiu_m
			 * @DateTime 2019-11-21T16:03:03+0800
			 * @param    {[type]}                 val [description]
			 * @param    {[type]}                 max [description]
			 * @return   {[type]}                     [description]
			 */
			setnumber(val, obj, max){

				let num =  /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
				if (!num.test(val)) {

					obj.number = 0
				}else if (val > max) {
					obj.number = max

				}else{

					return obj.number = parseInt(obj.number)
				}

			},
	
			changeQuality(val){

				if (val == '') {
					this.evaluateList =  []
					this.commentList =  []
					this.placeholder = true
				}else{
					this.placeholder = false
					this.semester = val
					this.evaluatingIndicator()
					this.getComment()
				}

			},
			//请求学期数据
			getSemester(){
				let success = (res=>{

					this.SemesterList = res.data;
					this.semester = res.data.length > 0 ? res.data[0].id : ''
					for (var i = 0; i < this.SemesterList.length; i++) {
						if (this.SemesterList[i].semester == 1) {
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第一学期'
						}else{
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第二学期'
						}
					}
					this.evaluatingIndicator()
					this.getComment()
				});

				let fail = (res=>{})

				let params = {
					now_term: 1
				};

				this.$ajax({
					url: 'api/quality/get_term',
					method: 'get',
					params: params,
					func: {success: success,fail: fail}
				})
			},
			/*对某用户的某次素质评价评分*/
			scoreQuality(){

				let qualityList = [];
				for (let i = 0; i < this.evaluateList.length; i++) {
					for (let j = 0; j < this.evaluateList[i].children.length; j++) {
						if (this.evaluateList[i].children[j].number == '') {
							return this.$message.error(`请填写${this.evaluateList[i].children[j].title}指标综合分`)
						}
						qualityList.push({
							quality_index_id: this.evaluateList[i].children[j].id,
							score: this.evaluateList[i].children[j].number
						})
					}
				}
				if (is_empty(this.comment)) {
					return this.$message.error('请输入评语')
				}
				let success = (res=>{
					this.$message.success(res.msg);
					
					this.state = 1 
					this.evaluatingIndicator()
					// this.getSemester()

				})



				let params = {
					term_id: this.semester,
					user_id: this.$g.user_id,
					class_id: this.path ,/*被评价用户的班级id*/
					teacher_or_student_or_me: 3,/*1代表是教师在评分 2代表是学生在评分 3代表是自己在评分*/
					comment: this.comment,/*评语*/
					quality_index_list: qualityList,
					
				};

				this.$ajax.post('api/quality/score_quality',params,{ func: {success: success}})
			},
			/*修改素质指标*/
			setEvaluatingIndicator(){

				for (var i = 0; i < this.evaluateList.length; i++) {
					if (this.evaluateList[i].score == '') {
						this.$message.error(`${this.evaluateList[i].title}的指标综合分还没有评分哦...`)
					}
				}
				let success = (res=>{
					this.$message.success(res.msg)
				});

				let params = {quality_index: []}

				this.$ajax.put('api/quality/quality_index',params, {func: {success: success}})
			},
			/*获取素质评价指标*/
			evaluatingIndicator(){
				let success=  (res=>{
					this.totlaSum = 0
					this.evaluateList = res.data;
					for (let i = 0; i < this.evaluateList.length; i++) {
						for (let j = 0; j < this.evaluateList[i].children.length; j++) {
							this.$set(this.evaluateList[i].children[j], 'number', '')

							if (this.evaluateList[i].children[j].get_score > 0) {
								this.totlaSum += parseInt(this.evaluateList[i].children[j].get_score)
							}
						}
					}
					this.loading = false
				})

				let params = {
					term_id: this.semester,
					user_id: this.$g.user_id,
					class_id: this.path
					// status: 1, /* 1正常 0已被隐藏的*/
				}

				this.$ajax({
					url: 'api/quality/score_quality',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/*获取评语*/
			getComment(){
				let success = (res=>{
					this.commentList = res.data.me
				});

				let params = {
					term_id: this.semester,//学期id,
					class_id: this.path,
					user_id:  this.$g.user_id
				};

				this.$ajax({
					url: 'api/quality/get_other_comment',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			goBack(){
				this.$router.back(-1)
			},
			//删除列表
			removeList(id){
				this.$confirm('评分确认后无法修改，是否提交？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them'
				}).then(() => {
					let success = ( res => {
						this.$message.success(res.msg);
						this.page_index = 1;
						this.getResourceList()
					});
					this.$ajax({
						url: 'api/resource/resource',
						method: 'delete',
						params: {
							id: id
						},
						func: {
							success: success
						}
					})
				}).catch(() => {});
			},
		}
	}
</script>